<template>
  <div class="order_list">
    <title-bar :title="'积分兑换优惠券'"/>
    <van-tabs sticky>
      <div class="points">总积分: {{points}}</div>
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :offset="100"
        
        @load="loadMore"
      >
        <van-cell-group v-for="(el, i) in items" class="order_list--panel" :key="i">
          <item-coupon :el="el" :points.sync="points"/>
        </van-cell-group>
      </van-list>
    </van-tabs>

    <is-empty v-if="isEmpty">抱歉,没有找到符合条件的优惠券</is-empty>
  </div>
</template>

<script>
import { ELE_COUPON_LISTS_JIFEN } from "@/api/order";
import { USER_PROFILE } from "@/api/user";

import { Tab, Tabs, Panel } from "vant";
import IsEmpty from "@/vue/components/is-empty/";
import TitleBar from "@/vue/components/title-bar/";
import loadMore from "@/vue/mixin/list-load-more";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import ItemCoupon from "@/views/user/module-jifenconvert/list";

export default {
  name: "jifen-convert",
  mixins: [loadMore, scrollFixed],

  props: {
    active: {
      type: [String, Number],
      default: 0
    }
  },

  computed: {},

  data() {
    return {
      items: [],
      points: ""
    };
  },
  watch: {
    $route: "resetInit"
  },

  created() {
    this.resetInit();
    return this.$reqGet(USER_PROFILE, { id: this.user.id }).then(res => {
      this.points = res.data.points;
    });
  },

  methods: {
    initData() {
      return this.$reqGet(
        ELE_COUPON_LISTS_JIFEN,
        {
          memberId: this.user.id,
          centreId: this.user.centreId,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const { rows, total } = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [IsEmpty.name]: IsEmpty,
    [ItemCoupon.name]: ItemCoupon,
    [TitleBar.name]: TitleBar
  }
};
</script>

<style lang="scss" scoped>
.order_list {
  padding-bottom: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  &--footer_btn {
    text-align: right;
  }
  &--panel {
    margin-bottom: 10px;
  }

  &--van-card {
    background-color: #fafafa;
  }

  &--total {
    text-align: right;
    padding: 10px;
  }
}
.points {
  padding: 5px 0 0 5px;
  font-size: 20px;
  line-height: 20px;
}
</style>
